<template>
<a-form :form="form" @submit="onSubmit">
      <p class="form-note">注：角色类型提交后不可变更</p>
      <a-row :gutter="24">
          <a-col :key="1" :span="24">
              <a-form-item label="角色名称" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                            :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                  <a-input  maxlength="32" placeholder="角色名称" v-decorator="[
                      'name',
                      {rules: [{ required: true, message: '请输入角色名称' }]}
                      ]"/>
              </a-form-item>
          </a-col>
          <a-col :key="2" :span="24">
              <a-form-item label="角色类型" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                            :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                  <a-select
                          v-decorator="['type',{initialValue:0},{rules: [{ required: true, message: '请选择类型' }]}]"
                          placeholder="请选择类型">
                      <a-select-option v-for="v in types" :key="v.id" :value="v.id">
                          {{v.name}}
                      </a-select-option>
                  </a-select>
              </a-form-item>
          </a-col>
          <a-col :key="3" :span="24">
              <a-form-item label="备注" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                            :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                  <a-textarea placeholder="请输入备注" v-decorator="['remark', {
                      rules: [{
                          max: 70, message: '字数不超过70'
                      }]
                  }]" maxLength="70" :rows="4"/>
              </a-form-item>
          </a-col>
          <a-col :key="4" :span="24">
              <span style="color:red">{{error}}</span>
          </a-col>
      </a-row>
</a-form>

</template>




<script>
    export default {
      props:['types'],
    	data(){
    		return {
          form: this.$form.createForm(this),
          labelCol:{lg: {span: 7}, sm: {span: 7}},
          wrapperCol:{lg: {span: 10}, sm: {span: 17} },
          error:'',
        }
    	},
    	mounted(){
    		
		  },
    	methods: {
		    onSubmit(){
          this.form.validateFields((err, values) => {
                    if (!err) {
                        this.http('post', 'role/create', values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.$emit("getList")
                                this.$emit("hideCreate")
                                this.form.resetFields();
                            } else {
                                this.error = res.msg
                                setTimeout(()=>{this.error = ''},3000)
                                //this.$message.error(res.msg);
                            }

                        })

                    }
                })
          
        },
        
    	}
    
    
 }
</script>

